<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>互联网+毕业生就业创业服务</title>
  <link rel="stylesheet" href="./styles/css/common.css">
  <link rel="stylesheet" href="./styles/css/index.css">
</head>

<body>
  <div class="all">
    <!-- 头部开始 -->
    <include src="./include/head.html"></include>
    <!-- 头部结束 -->
    <!-- 申请提示开始 -->
    <div class="comContent w">
      <div class="banner">
        <!-- 招商广告位 -->
        专项活动
      </div>
      <!-- 区当前代办 -->
      <div class="cont_warp warpPadding">
        <div class="title">当前代办</div>
        <ul class="warp_ul J_qdb clearfix">
          <li class="warp_li tianjia clearfix J_tianjia">
            <!-- <span class="iconfont icon-tianjia"></span> -->
            <img src="./styles/imgs/jia.png" alt="">
            <p>自定义</p>
          </li>
        </ul>
      </div>
      <div class="warp_parent clearfix">
        <!-- 快捷菜单   -->
        <div class="cont_warp heightMenu col_9">
          <div class="title">快捷菜单 <span class="edit J_edit">编辑</span></div>
          <ul class="linkMenu J_menu clearfix">
          </ul>
        </div>
        <!-- 便捷查询   -->
        <div class="cont_warp bjcx col_3">
          <div class="title">便捷查询</div>
          <ul class="bjcxMenu clearfix">
            <li class="bjcxMenu_li">
              <a href="./test.html">
                个人查询
              </a>
            </li>
            <li class="bjcxMenu_li">
              单位查询
            </li>
            <li class="bjcxMenu_li">
              招聘会查询
            </li>
          </ul>
        </div>
      </div>
      <!-- 修改开始 -->
      <div class="censusNav clearfix">
        <div class="censusNavItem">
          <p>浏览量统计</p>
          <span><b>32005</b>次</span>
        </div>
        <div class="censusNavItem">
          <p>浏览量统计</p>
          <span><b>32005</b>次</span>
        </div>
        <div class="censusNavItem">
          <p>浏览量统计</p>
          <span><b>32005</b>次</span>
        </div>
        <div class="censusNavItem">
          <p>浏览量统计</p>
          <span><b>32005</b>次</span>
        </div>
        <div class="censusNavItem">
          <p>招聘会发布岗位</p>
          <span><b>32005</b>次</span>
        </div>
        <div class="censusNavItem nMr">
          <p>招聘会发布岗位</p>
          <span><b>32005</b>次</span>
        </div>
      </div>
      <!-- 图表展示 -->
      <div class="chartWrap clearfix">
        <div class="chartLeft left">
          <div class="chartLTop">
            <h1>招聘会类型分析</h1>
            <div class="chartItem" id="chart1"></div>
          </div>
          <div class="chartLBottom">
            <h1>毕业生院校注册排名</h1>
            <table border="0" cellspacing="0" cellpadding="0" class="table">
              <tr class="odd">
                <td width="20%">序号</td>
                <td width="50%">院校名称</td>
                <td width="30%">注册人数</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
              <tr>
                <td>1</td>
                <td><span title="北京大学北京大学北京大学北京大学">北京大学北京大学北京大学北京大学</span></td>
                <td>128</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="chartRight">
          <div class="chartRTop clearfix">
            <div class="chartRTopLeft left">
              <div class="dwNum clearfix">
                <div class="dwNumLeft left">
                  <p class="sbdw left">申报单位数：<span>500</span></p>
                  <p class="chdw right">参会单位数：<span class="down">460↓</span></p>
                </div>
                <div class="dwNumRight right">
                  <p class="sbgw left">申报单位数：<span>500</span></p>
                  <p class="chgw right">参会单位数：<span class="up">1200↑</span></p>
                </div>
              </div>
              <div class="chartRTopLchart1 clearfix">
                <div class="centerImg left">
                  <img src="./styles/imgs/mapImg.png" alt="">
                </div>
                <div class="gwlist gwlistRight right">
                  <div class="gwlistNav clearfix">
                    <span class="gw">岗位</span>
                    <span class="bys">毕业生</span>
                  </div>
                  <div class="clearfix gwlistList">

                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>111</b><strong>212</strong> </p>
                    <p class="clearfix"> <span>东城区：</span><b>1</b><strong>22</strong> </p>
                    <p class="clearfix"> <span>城城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>东城区：</span><b>1</b><strong>22</strong> </p>
                    <p class="clearfix"> <span>城城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>111</b><strong>212</strong> </p>
                    <p class="clearfix"> <span>东城区：</span><b>1</b><strong>22</strong> </p>
                    <p class="clearfix"> <span>城城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>东城区：</span><b>1</b><strong>22</strong> </p>
                    <p class="clearfix"> <span>城城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                    <p class="clearfix"> <span>城东城区：</span><b>11111</b><strong>21212</strong> </p>
                  </div>
                </div>
              </div>
              <div class="chartRTopLchart2">
                <div class="RTLCnav clearfix">
                  <h1 class="left">招聘会、用人单位、招聘岗位数量趋势分析</h1>
                  <div class="right">
                    <span class="left active">按月份</span>
                    <span class="left">按年度</span>
                  </div>
                </div>
                <div class="chartItem" id="chart2"></div>
              </div>
            </div>
            <div class="chartRTopRight left">
              <div class="chartRTopRchart1">
                <h1>实际单位性质分析</h1>
                <div class="chartItem" id="chart3"></div>
              </div>
              <div class="chartRTopRchart2">
                <h1>毕业生学历分析</h1>
                <div class="chartItem" id="chart4"></div>
              </div>
            </div>
          </div>
          <div class="chartRBottom left">
            <h1>岗位、毕业生专业分析</h1>
            <div class="chartItem" id="chart5"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部开始 -->
    <include src="./include/foot.html"></include>
    <!-- 尾部结束 -->

    <!-- 弹窗开始 -->
    <div class="alert hide">
      <div class="alert_bg"></div>
      <div class="alert_div">
        <div class="alert_title">
          <span>修改信息</span>
          <img src="./styles/imgs/close.png" class="J_tj" alt="">
        </div>
        <div class="chang_login clearfix">
          <div class="warpLeft">
            <div class="title">可选功能</div>
            <div class="warpCont">
              <ul class="L_ul">
              </ul>
            </div>
          </div>
          <div class="warpRight">
            <div class="title">已选功能 <span class="warpNum J_num">4</span></div>
            <div class="warpCont">
              <ul class="R_ul">
              </ul>
            </div>
          </div>
        </div>
        <div class="login_btn clearfix">
          <span class="btn btn_blue_deep btn_alert J_back">提交</span>
        </div>
      </div>
    </div>
    <!-- 弹窗结束 -->
  </div>


</body>
<script src="./common/vendor.js"></script>
<script src="./common/common.js"></script>
<script src="./common/echart/echarts.js"></script>

<script>
  $(function () {
    // 招聘会类型分析
    chart1({
      id: 'chart1',
      legendData: ['线上招聘会', '线下招聘会'],
      data: [
        { value: 335, name: '线下招聘会' },
        { value: 210, name: '线上招聘会' }
      ],
      color: ['#53b3ff', '#55d55a']
    });
  // 招聘会、用人单位、招聘岗位数量趋势分析
    chart2({
      id: 'chart2',
      legendData: ['招聘会', '用人单位', '岗位数量'],
      xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      data: {
        data1: [120, 132, 101, 134, 90, 230, 210, 140, 120, 150, 170, 130],
        data2: [220, 182, 191, 234, 290, 330, 310, 235, 80, 250, 130, 310],
        data3: [420, 152, 19, 134, 230, 130, 210, 152, 136, 148, 121, 145],
      },
      color: ['#53b3ff', '#FFC107', '#4CAF50']
    });

    // 实际单位性质分析
    chart3({
      id: 'chart3',
      legendData: ['民营', '国有', '事业', '机关', '港澳台商投资企业'],
      data: [
        { value: 335, name: '民营' },
        { value: 310, name: '国有' },
        { value: 234, name: '事业' },
        { value: 135, name: '机关' },
        { value: 154, name: '港澳台商投资企业' }
      ],
      color: ['#53b3ff', '#55d55a', '#dce303', '#e366ff', '#ff713e']
    });

    // 毕业生学历分析
    chart4({
      id: 'chart4',
      legendData: ['招聘人数', '应聘人数'],
      xAxisData: ['专科', '本科', '研究生', '博士', '博士以上'],
      data: {
        data1: [1, 3, 5, 7, 9],
        data2: [20, 20, 25, 25, 25]
      },
      color: ['#53b3ff', '#FFC107'],
      line: false
    });

    // 岗位、毕业生专业分析
    chart5({
      id: 'chart5',
      legendData: ['招聘人数', '应聘人数'],
      xAxisData: ['艺术学', '军事学', '文学', '农学', '医学', '经济学', '历史学', '哲学', '法学', '教育学', '管理学', '理学', '工学'],
      data: {
        data1: [1, 3, 5, 7, 9, 10, 10, 13, 40, 10, 12, 14, 34],
        data2: [20, 20, 25, 25, 25, 20, 40, 30, 10, 50, 30, 20, 40]
      },
      color: ['#53b3ff', '#FFC107'],
      line: false
    });
    /**
    @param String opt.id 图表元素id
    @param Array opt.legendData 图表legend展示数据
    @param Array opt.data 图表data数据
    @param Array opt.color 图表自定义颜色会继承下去
    **/
    function chart1(opt) {
      var chart = echarts.init(document.getElementById(opt.id));
      var option = {
        color: opt.color || ['#53b3ff', '#55d55a'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: '0',
          data: opt.legendData
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ["50%", "45%"], //调整饼状图的位置
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outer',
              alignTo: 'edge',
              margin: '0%',
              color: '#676767',
              formatter: '{b} \n {c} ({d}%)'
            },
            labelLine: {
              show: false
            },
            data: opt.data
          }
        ]
      };
      chart.setOption(option)
    }
    /**
    @param String opt.id 图表元素id
   @param Array opt.legendData 图表legend展示数据
   @param Array opt.xAxisData 图表xAxis数据
   @param Array opt.data 图表data数据
   @param Array opt.color 图表自定义颜色会继承下去
   **/
    function chart2(opt) {
      var chart = echarts.init(document.getElementById(opt.id));
      var option = {
        color: opt.color || ['#3453FA', '#4CAF50', '#A639FB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '8%',
          right: '5%',
          bottom: '20',
          top: '40'
        },
        legend: {
          left: 'right',
          top: '10',
          icon: 'roundRect',
          data: opt.legendData
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: opt.xAxisData,
            axisLine: {
              lineStyle: {
                color: '#B4B4B4',
              }
            },
          }
        ],
        yAxis: [
          {
            name: '单位:人',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#B4B4B4',
              }
            },
          }
        ],
        series: [
          {
            name: opt.legendData[0],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: opt.data.data1,
            //渐变
            areaStyle: {
              normal: {
                opacity: 0.8,
                color: '#53b3ff'
              }
            }
          },
          {
            name: opt.legendData[1],
            type: 'line',
            symbol: 'circle',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: opt.data.data2,
          },
          {
            name: opt.legendData[2],
            type: 'line',
            symbol: 'circle',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: opt.data.data3,
          }
        ]
      };
      chart.setOption(option);
    }

    /**
    @param String opt.id 图表元素id
    @param Array opt.legendData 图表legend展示数据
    @param Array opt.data 图表data数据
    @param Array opt.color 图表自定义颜色会继承下去
    **/
    function chart3(opt) {
      var chart = echarts.init(document.getElementById(opt.id));
      var option = {
        color: opt.color || ['#53b3ff', '#55d55a', '#dce303', '#e366ff', '#ff713e'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: '0',
          data: opt.legendData
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            bottom: '29',
            label: {
              show: true,
              position: 'outer',
              alignTo: 'edge',
              margin: '0%',
              // color: '#676767',
              // formatter: '{b}\n{c}/{d}%',
              formatter: function (a) {
                a.name = a.name.length > 4 ? a.name.slice(0, 4) + '\n' + a.name.slice(4) : a.name;
                return a.name + '\n' + '数值:' + a.value + '\n' + '(' + a.percent + '%)'
              },
            },
            labelLine: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: opt.data,
          }
        ]
      };
      chart.setOption(option)
    }

    /**
     @param String opt.id 图表元素id
    @param Array opt.legendData 图表legend展示数据
    @param Array opt.data 图表data数据
    @param Array opt.color 图表自定义颜色会继承下去
    **/
    function chart4(opt) {
      var chart = echarts.init(document.getElementById(opt.id));
      var option = {
        legend: {
          left: 'right',
          top: '10',
          icon: 'roundRect',
          data: opt.legendData
        },
        color: opt.color || ['#8D00FA', '#FEAB4F'],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#F1F1F1',
              color: '#5A5A5A'
            }
          },
          confine: true
        },
        grid: {
          bottom: '0',
          top: '80',
          left: '0',
          right: '0',
          containLabel: true
        },
        yAxis: {
          name: '单位:人',
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
            },
          },

        },
        xAxis: [{
          data: opt.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#B4B4B4',
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#B2B2B2'
            },
            formatter: function (value) {
              var str = value.split("");
              　　　　　　return str.join("\n");
            },
            // interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            // rotate: 38   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
        ],
        series: [{
          name: opt.legendData[0],
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#676767'
            }
          },
          itemStyle: {
            normal: {
            }
          },
          z: 2,
          data: opt.data.data1
        }, {
          name: opt.legendData[1],
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#676767'
            }
          },
          // itemStyle: {
          //   normal: {
          //     barBorderRadius: 15,
          //   }
          // },
          z: 1,
          data: opt.data.data2
        }]
      };
      if (opt.line) {
        for (var i = 0; i < opt.legendData.length; i++) {
          var obj = {
            name: opt.legendData[i],
            type: 'line',
            symbol: 'circle',
            color: opt.color[i],
            data: opt.data['data' + (i + 1)],
          }
          option.series.push(obj)
        }
      }
      chart.setOption(option);
    }

    /**
     @param String opt.id 图表元素id
    @param Array opt.legendData 图表legend展示数据
    @param Array opt.data 图表data数据
    @param Array opt.color 图表自定义颜色会继承下去
    **/
    function chart5(opt) {
      var chart = echarts.init(document.getElementById(opt.id));
      var option = {
        legend: {
          left: 'right',
          top: '0',
          icon: 'roundRect',
          data: opt.legendData
        },
        color: opt.color || ['#8D00FA', '#FEAB4F'],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#F1F1F1',
              color: '#5A5A5A'
            }
          },
          confine: true
        },
        grid: {
          bottom: '0',
          top: '30',
          left: '0',
          right: '0',
          containLabel: true
        },
        yAxis: {
          name: '单位:人',
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
            },
          },

        },
        xAxis: [{
          data: opt.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#B4B4B4',
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#B2B2B2'
            },
            formatter: '{value} ',
          },
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
        ],
        series: [{
          name: opt.legendData[0],
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#676767'
            }
          },
          itemStyle: {
            normal: {
            }
          },
          z: 2,
          data: opt.data.data1
        }, {
          name: opt.legendData[1],
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#676767'
            }
          },
          // itemStyle: {
          //   normal: {
          //     barBorderRadius: 15,
          //   }
          // },
          z: 1,
          data: opt.data.data2
        }]
      };
      if (opt.line) {
        for (var i = 0; i < opt.legendData.length; i++) {
          var obj = {
            name: opt.legendData[i],
            type: 'line',
            symbol: 'circle',
            color: opt.color[i],
            data: opt.data['data' + (i + 1)],
          }
          option.series.push(obj)
        }
      }
      chart.setOption(option);
    }

  });
</script>

</html>
